<template>
	<div id="app">
		<!-- 头部导航 -->
		<header class="header">
			<el-row>
				<el-col :span="24">
					<el-menu default-active="6" class="el-menu-demo" mode="horizontal" @select="">
						<el-menu-item index="1">高级插件</el-menu-item>
						<el-menu-item index="2">在线商城</el-menu-item>
						<el-menu-item index="3">客户管理</el-menu-item>
						<el-menu-item index="4">系统设置</el-menu-item>
						<el-menu-item index="5">在线发布</el-menu-item>
						<el-menu-item index="6">elementUI实例</el-menu-item>
					</el-menu>
				</el-col>
			</el-row>
		</header>
		<div style="position: relative;width: 100%;height: 60px;"></div>

		<main>
			<!-- 左侧导航 -->
			<div class="main-left">
				<el-menu default-active="/activeRadio" class="el-menu-vertical-demo" :router="true">
					<el-menu-item index="/activeRadio">Radio 单选按钮</el-menu-item>
					<el-menu-item index="/activeCheckbox">checkbox 多选框</el-menu-item>
					<el-menu-item index="/activeInput">Input 输入框</el-menu-item>
					<el-menu-item index="/activeInputNumber">inputNumber 计数器</el-menu-item>
					<el-menu-item index="/activeSelect">select 选择器</el-menu-item>
					<el-menu-item index="/activeCascader">Cascader 级联选择器</el-menu-item>
					<el-menu-item index="/activeSlider">Slider 滑块</el-menu-item>
					<el-menu-item index="/activeTimePicker">TimePicker 时间选择器</el-menu-item>
					<el-menu-item index="/activeDatePicker">DatePicker 日期选择器</el-menu-item>
					<el-menu-item index="/activeDateUpload">Upload 上传</el-menu-item>
					<el-menu-item index="/activeDateUpload2">Upload 上传用户头像</el-menu-item>
					<el-menu-item index="/activeDateUpload3">Upload 照片墙</el-menu-item>
					<el-menu-item index="/activeDateUpload4">Upload 图片列表缩略图</el-menu-item>
					<el-menu-item index="/activeDateUpload5">Upload 拖拽上传</el-menu-item>
					<el-menu-item index="/activeRate">Rate 评分</el-menu-item>
					<el-menu-item index="/activeForm">Form 表单</el-menu-item>
					<el-menu-item index="/activeFormValidator">Form 表单验证</el-menu-item>
					<el-menu-item index="/activeTable">table 表格</el-menu-item>
					<el-menu-item index="/activeTag">tag</el-menu-item>
					<el-menu-item index="/activeTree">Tree 树形控件</el-menu-item>
					<el-menu-item index="/activePagination">Pagination 分页</el-menu-item>
					<el-menu-item index="/activeBadge">Badge 标记</el-menu-item>
					<el-menu-item index="/activeAlert">alert 警告</el-menu-item>
					<el-menu-item index="/activeLoading">Loading 加载</el-menu-item>
					<el-menu-item index="/activeMessage">Message 消息提示</el-menu-item>
					<el-menu-item index="/activeMessageBox">MessageBox 弹框</el-menu-item>
					<el-menu-item index="/activeNotification">Notification 通知</el-menu-item>
					<el-menu-item index="/activeNavMenu">activeNavMenu 导航菜单</el-menu-item>
					<el-menu-item index="/activeTabs">activeTabs 标签页</el-menu-item>
					<el-menu-item index="/activeDropdown">Dropdown 下拉菜单</el-menu-item>
					<el-menu-item index="/activeDialog">dialog 对话框</el-menu-item>
				</el-menu>
			</div>
			<!-- 右侧主要内容区域 -->
			<div class="main-right">
				<!-- 视图 -->
				<router-view class="view"></router-view>
			</div>
		</main>
	</div>
</template>

<script>
	import Vue from 'vue'
	import Element from 'element-ui'
	import 'element-ui/lib/theme-chalk/index.css'

	Vue.use(Element)

	export default {
		name: 'app',
		data: function() {
			return {
				active: true
			}
		},
		methods: {
			isSelect(index) {
				alert(index)
			}
		}
	}
</script>

<style>
	body {
		margin: 0;
	}
	
	#app {
		min-width: 1200px;
		margin: 0 auto;
		font-family: "Helvetica Neue", "PingFang SC", Arial, sans-serif;
	}
	/* 头部导航 */
	
	header {
		z-index: 1000;
		min-width: 1200px;
		transition: all 0.5s ease;
		border-top: solid 4px #3091F2;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
	}
	
	header.header-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	
	header .el-menu-demo {
		padding-left: 300px!important;
	}
	/* 主内容区 */
	
	main {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		min-height: 800px;
		border: solid 40px #E9ECF1;
		background-color: #FCFCFC;
	}
	
	main .main-left {
		text-align: center;
		width: 200px;
		float: left;
	}
	
	main .main-right {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		background-color: #fff;
		padding: 50px 70px;
	}
	
	main .el-menu {
		background-color: transparent!important;
	}
</style>